<template>
    <view class="fixed-top-bar">
        <!-- 左侧区域：占1/3宽度 -->
        <!-- <view class=" top-left ">
            <text class="top-left-text" @click="goBack">&lt;</text>
        </view> -->
        <view class=" top-left ">
            <text class="top-left-text" @click="handleLeftClick">{{ lefttitle }}</text>
        </view>
        <!-- 中间区域：占1/3宽度 -->
        <view class="top-item ">
            <text class="title">{{ title }}</text>

        </view>
        <!-- 右侧区域：占1/3宽度 -->
        <view class=" top-right">
            <text class="top-right-text" @click="handleRightClick">{{ ringhttitle }}</text>
        </view>
        <!-- 关于 -->
        <view class=" top-right">
            <!-- <text class="top-right-text" @click="goAbout">关于</text> -->
        </view>
    </view>
    <!-- 关于弹窗 -->
    <view class="popup">
        <uni-popup type="center" ref="aboutPopup" :isMaskClick="false" @touchstart.native.passive :animation="true">
            <Information @confirm-clicked="closePopup" />
        </uni-popup>
    </view>
    <!-- 退出弹窗 -->
    <view class="popup">
        <uni-popup type="center" ref="exitPopup" :isMaskClick="false" @touchstart.native.passive :animation="true">
            <view class="popup-content">
                <view class="popup-content-top">
                    <text>通知</text>
                </view>
                <view class="popup-content-text">
                    <text>是否退出登录?</text>
                </view>
                <view class="popup-content-btn">
                    <view class="popup-content-btn-yes" @click="exitLogin">是</view>
                    <view class="popup-content-btn-no" @click="closeExitPopup">否</view>
                </view>

            </view>

        </uni-popup>
    </view>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import Information from '@/pages/Login/Information.vue'


// 添加返回上一页的方法
const goBack = () => {
    // 调用UniApp提供的返回上一页API，类似于浏览器的后退按钮
    uni.navigateBack({
        delta: 1
    });
}

// 关于
//控制弹窗显示/隐藏
const aboutPopup = ref<boolean>(false);
const openAboutPopup = () => {(aboutPopup.value as any).open("center")};
const closePopup = () => {(aboutPopup.value as any).close();};
// ✅ 退出弹窗控制
const exitPopup = ref<boolean>(false);
const openExitPopup = () => { (exitPopup.value as any).open("center") };
const closeExitPopup = () => { (exitPopup.value as any).close() };
const exitLogin = () => { (exitPopup.value as any).close(); emit('exitLogin'); console.log('退出登录'); }//跳转到登录页
// 退出登录逻辑
// const handleExit = () => {
//   // 退出登录API调用...
//   closeExitPopup();
// };




// 2. 定义props（接收父组件传递的数据）
const props = defineProps({
    lefttitle: {
        type: String,  // 指定数据类型为字符串
        default: '<'    // 设置默认值为空字符串
    },
    title: {
        type: String,  // 指定数据类型为字符串
        default: '首页'    // 设置默认值为空字符串
    },
    ringhttitle: {
        type: String,  // 指定数据类型为字符串
        default: '☰'    // 设置默认值为空字符串
    },
    // 添加首页标识属性
    isHomePage: {
        type: Boolean,
        default: false  // 默认不是首页
    }
})
// 定义事件发射器
const emit = defineEmits(['exitLogin'])
// 左侧按钮点击事件处理
const handleLeftClick = () => {
    if (props.isHomePage) {
        // 如果是首页，触发退出登录事件（由父组件实现具体逻辑）
        openExitPopup();

    } else {
         // 非首页，默认返回上一页
        uni.navigateBack({
            delta: 1  // 返回层级为1
        })
    }
}
// 右侧按钮点击事件处理
const handleRightClick = () => {
    if (props.isHomePage) {
        // 如果是首页，触发退出登录事件（由父组件实现具体逻辑）
        openAboutPopup();

    } else {
      
    }
}





</script>
<style scoped>
.fixed-top-bar {

    /* 使用rpx单位替代固定px值，提高不同设备的适配性 */
    /* #ifdef APP-PLUS */
    border-top: 70rpx solid #fefefe;
    /* #endif */
    width: 103%;
    /* background-color: #FFF; */
    height: 50px;
    /* 标题栏高度（根据实际调整） s/
    background: #fff;
    /* 背景色 */
    /* z-index: 999; */
    /* 确保在最上层 */
    display: flex;
    /* 内容居中 */
    align-items: center;
    /* justify-content: center; */
    border-bottom: 1px solid #e5e5e5;
}



/* 三等分子项样式 */
.top-item {
    width: 100%;
    /* 每个子项平均分配宽度 */
    height: 100%;
    /* 高度占满父容器 */
    display: flex;
    /* 子项内部使用flex布局 */
    justify-content: center;
    align-items: center;
}

.top-left {
    justify-content: flex-start;
    padding-left: 0;
    /* 确保无左内边距，元素移动到最左边 */
}

/* 返回按钮样式 */
.top-left-text {
    font-size: 40px;
    color: #ffffff;
    line-height: 60px;
    margin-left: 20px;
}

.top-title {
    display: flex;
    justify-content: center;
    line-height: 60px;
}

/* 标题文本样式 */
.title {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
}

.top-right {
    justify-content: flex-end;
    /* 子元素靠右对齐 */
    padding-right: 10px;
    /* 右侧留出边距 */
}

/* 右侧文本样式 */
.top-right-text {
    font-size: 30px;
    color: #ffffff;
    right: 0px;
}

/* 退出弹窗 */
.popup-content {
    width: 600rpx;
    height: auto;
    /* background-color: #fff; */
    border-radius: 20rpx;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
}

.popup-content-top {
    padding-top: 10px;
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: coral;
}

.popup-content-text {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 按钮 */
.popup-content-btn {
    padding-top: 30px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.popup-content-btn-yes {
    padding: 10px 0px;
    width: 100%;
    height: 30px;
    color: #000000;
    border: 1px solid #e9e9e9;
    text-align: center;

    border-bottom-left-radius: 20rpx;
    /* 设置左下边框为半圆，可根据实际调整半径值 */
}

.popup-content-btn-no {
    padding: 10px 0px;
    width: 100%;
    height: 30px;
    color: #4784ec;
    text-align: center;
    border: 1px solid #e9e9e9;
    border-bottom-right-radius: 20rpx;
    /* 设置左下边框为半圆，可根据实际调整半径值 */
}
</style>
